<template>
  <el-dialog v-model="props.dialogVisible" width="40%" :show-close="false" center :before-close="handleClose">
    <div>
      <div class="iconwarning">
        <el-icon size="50" color="red">
          <Warning />
        </el-icon>
      </div>
      <p style="text-align: center; margin-bottom: 20px">
        您正在执行将当前订单合同状态，变更：<span style="color: red">
          {{
            props.status === 1 ? "意向合同" : props.status === 2 ? "首次合同" : props.status === 3 ? "最终合同" : "最终合同"
          }} </span
        >！注意合同状态是不可逆向操作， 如已明确合同信息可直接变更到最终合同进入合同支付流程，请确认需要继续变更！
      </p>
      <div>
        <el-steps style="width: 100%" class="mb-4" align-center space="100.30%" :active="props.status" finish-status="success">
          <el-step title="意向合同" description="可修改合同信息不能付款" />
          <el-step title="首次合同" description="可修改合同信息不能付款" />
          <el-step title="最终合同" description="进入付款后不可修改" />
        </el-steps>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer" style="margin-top: 40px">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handelClickSubmit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
import { Warning } from "@element-plus/icons-vue";
/*
defineProps  控制弹出显隐
**/
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default() {
      return false;
    }
  },
  status: {
    type: Number,
    default() {
      return 1;
    }
  }
});
const emits = defineEmits(["ok", "close"]);
// 方法声明
const handelClickSubmit = () => {
  emits("ok", props.status);
};
const handleClose = () => {
  emits("close");
};
</script>
<style scoped lang="scss">
.iconwarning {
  display: flex;
  justify-content: center;
  align-center: center;
  margin: 0 0 40px 0;
}
</style>
